<template>
	<view class="popup-container animated fadeIn faster " v-if="visible" @click.self="close">
		<view class="popup-content-container flex flex-column animated fadeInUp faster">
			<slot></slot>
			<view class="footer mt-auto">
				<divider></divider>
				<view class="close-btn flex align-center justify-center" hover-class="bg-light" @click.self="close">{{closeText}}</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name:"popup",
		props: {
			closeText: {
				type: String,
				default: '取消'
			},
		},
		data() {
			return {
				visible:false
			};
		},
		methods:{
			open() {
				this.visible = true;
			},
			close() {
				this.visible = false;
			}
		}
	}
</script>

<style lang="scss">
.popup-container {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 100rpx;
	background-color: rgba(0,0,0,0.5);
	z-index: 1000;
	.popup-content-container {
		position: absolute;
		left: 0;
		right: 0;
		bottom: 0;
		height: 300rpx;
		background-color: #ffffff;
		.close-btn {
			width: 100%;
			height: 80rpx;
		}
	}
}
</style>